import React from "react";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import { AboutMe } from "../components/homepage/AboutMe";
import {
  SocialLinkData,
  SocialLinks,
} from "../components/homepage/SocialLinks";
import { Hero } from "../components/homepage/Hero";

import avatar from "./assets/index/avatar.jpg";
import AboutMeDesc from "./assets/index/_about-me.md";

const socialLinks: SocialLinkData[] = [
  {
    name: "GitHub",
    url: "https://github.com/ALVIN-YANG",
    svg: (
      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <title>GitHub</title>
        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
      </svg>
    ),
  },
  // {
  //   name: "Twitter",
  //   url: "https://twitter.com/pkosiec",
  //   svg: (
  //     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  //       <title>Twitter</title>
  //       <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
  //     </svg>
  //   ),
  // },
  {
    name: "语雀",
    url: "https://www.yuque.com/qingjiao",
    svg: (
      <svg
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
      >
        <path
          d="M0 127.904072v767.424432q0 6.2673 0.63952 12.534599t1.790657 12.406695q1.279041 6.139395 3.069698 12.150886 1.854609 6.075443 4.220834 11.831127 2.430177 5.819635 5.371971 11.383463 2.941794 5.499875 6.459156 10.743942 3.517362 5.244067 7.482388 10.104421 3.965026 4.860355 8.441669 9.273045 4.476643 4.476643 9.273045 8.441669 4.860355 3.965026 10.104422 7.482388 5.244067 3.45341 10.743942 6.395204 5.563827 3.005746 11.383462 5.435923 5.755683 2.366225 11.767175 4.220834 6.011491 1.790657 12.150887 3.069698 6.203347 1.215089 12.470647 1.790657 6.2673 0.63952 12.534599 0.639521h767.424432q6.2673 0 12.534599-0.639521t12.406695-1.790657q6.139395-1.279041 12.150886-3.069698 6.075443-1.854609 11.831127-4.220834 5.819635-2.430177 11.383463-5.371971 5.499875-2.941794 10.743942-6.459156 5.244067-3.517362 10.104421-7.482388 4.860355-3.965026 9.273045-8.441669 4.476643-4.476643 8.441669-9.273045 3.965026-4.860355 7.482388-10.104421 3.45341-5.244067 6.395204-10.743942 3.005746-5.563827 5.435923-11.383463 2.366225-5.755683 4.220834-11.767174 1.790657-6.075443 3.069698-12.150887 1.215089-6.203347 1.790657-12.470647 0.63952-6.2673 0.639521-12.534599V127.904072q0-6.2673-0.639521-12.534599t-1.790657-12.406695q-1.279041-6.203347-3.069698-12.150887-1.854609-6.075443-4.220834-11.831127-2.430177-5.819635-5.371971-11.383462-2.941794-5.499875-6.459156-10.743942-3.517362-5.244067-7.482388-10.104422-3.965026-4.860355-8.441669-9.273045-4.476643-4.476643-9.273045-8.441669-4.860355-3.965026-10.104421-7.482388-5.244067-3.517362-10.743942-6.395203-5.563827-3.005746-11.383463-5.435924-5.755683-2.366225-11.767174-4.220834-6.075443-1.790657-12.150887-3.069698-6.203347-1.215089-12.470647-1.790657Q901.595803 0 895.328504 0H127.904072q-6.2673 0-12.534599 0.63952T102.962778 2.430177q-6.203347 1.279041-12.150887 3.069698-6.075443 1.854609-11.831127 4.220834-5.819635 2.430177-11.383462 5.371971Q62.097427 18.034474 56.917312 21.551836 51.609293 25.069198 46.684986 29.034224 41.888584 32.999251 37.475893 37.475893 32.999251 41.952536 29.034224 46.684986 25.069198 51.609293 21.551836 56.917312q-3.517362 5.244067-6.395203 10.743942-3.005746 5.563827-5.435924 11.383462-2.366225 5.755683-4.220834 11.767175-1.790657 6.011491-3.069698 12.150887-1.215089 6.203347-1.790657 12.470647Q0 121.636772 0 127.904072z m529.970522 120.101924a122.915813 122.915813 0 0 0-3.837122-4.476643c-5.691731-7.354484-1.854609-19.505371 8.953285-19.505371h2.749938l2.110417-0.063952h3.389458l2.046465-0.063952h7.930052l2.302274-0.063952h12.470647l2.558081 0.063952h2.558081l2.622034 0.063952h3.581314l2.749937 0.127904h2.81389l2.81389 0.063952 1.918561 0.063952 2.877841 0.063952 2.941794 0.063952 3.005746 0.127904h1.982513l3.069698 0.127904 3.069697 0.127904h2.110417l2.110418 0.127904 2.110417 0.063953 2.110417 0.127904 2.174369 0.063952 2.174369 0.063952 3.261554 0.191856 2.238322 0.063952 3.325505 0.191856 2.238322 0.063952 2.302273 0.127904 3.389458 0.191856 2.302273 0.127904 2.366225 0.127904 2.302274 0.127904 2.366225 0.127904 2.366225 0.191857 2.366226 0.127904 2.430177 0.127904 2.430178 0.191856 2.430177 0.127904 2.430177 0.191856c87.870097 6.011491 111.084686 69.579815 113.578816 77.190107l0.127904 0.383713 0.127904 0.31976 38.115414 2.110417a3.709218 3.709218 0 0 1 1.598801 7.034724c-39.138646 21.296028-51.097677 64.527604-44.062953 92.730452 2.238321 9.017237 5.755683 16.819385 9.720709 25.069198l2.430178 5.180115c9.081189 19.057707 19.313515 42.208344 20.976267 88.637522 3.709218 103.98601-87.294529 197.419935-194.925805 197.419935H596.672496l-4.924307 0.063952h-2.622034c-68.300774 55.382463-187.059705 97.846615-387.165625 63.312516-6.714964-1.151137-15.156633-10.552086-6.459156-20.464652l33.255059-38.179365h-0.255808l39.394454-44.958282a37125.435923 37125.435923 0 0 1 190.832875-218.076442l0.255808-0.255808 1.854609-2.110418 2.110417-2.366225 2.046466-2.366225 10.232325-11.703223 2.046465-2.302273 2.046466-2.302273 1.982513-2.302274 1.023232-1.151136 1.982513-2.302274 0.959281-1.151136 1.982513-2.302274 1.982513-2.238321c22.830877-26.604047 43.167624-52.568574 57.620785-82.30627a99.445416 99.445416 0 0 0-16.94729-100.084936z"
          p-id="980"
        ></path>
      </svg>
    ),
  },
  {
    name: "LinkedIn",
    url: "https://www.linkedin.com/in/luqing-yang",
    svg: (
      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <title>LinkedIn</title>
        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
      </svg>
    ),
  },
  {
    name: "Medium",
    url: "https://medium.com/@ylq.win",
    svg: (
      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <title>Medium</title>
        <path d="M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z" />
      </svg>
    ),
  },
  {
    name: "Dev.to",
    url: "https://dev.to/alvinyang_55",
    svg: (
      <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <title>dev.to</title>
        <path d="M7.42 10.05c-.18-.16-.46-.23-.84-.23H6l.02 2.44.04 2.45.56-.02c.41 0 .63-.07.83-.26.24-.24.26-.36.26-2.2 0-1.91-.02-1.96-.29-2.18zM0 4.94v14.12h24V4.94H0zM8.56 15.3c-.44.58-1.06.77-2.53.77H4.71V8.53h1.4c1.67 0 2.16.18 2.6.9.27.43.29.6.32 2.57.05 2.23-.02 2.73-.47 3.3zm5.09-5.47h-2.47v1.77h1.52v1.28l-.72.04-.75.03v1.77l1.22.03 1.2.04v1.28h-1.6c-1.53 0-1.6-.01-1.87-.3l-.3-.28v-3.16c0-3.02.01-3.18.25-3.48.23-.31.25-.31 1.88-.31h1.64v1.3zm4.68 5.45c-.17.43-.64.79-1 .79-.18 0-.45-.15-.67-.39-.32-.32-.45-.63-.82-2.08l-.9-3.39-.45-1.67h.76c.4 0 .75.02.75.05 0 .06 1.16 4.54 1.26 4.83.04.15.32-.7.73-2.3l.66-2.52.74-.04c.4-.02.73 0 .73.04 0 .14-1.67 6.38-1.8 6.68z" />
      </svg>
    ),
  },
  // {
  //   name: "Instagram",
  //   url: "https://www.instagram.com/pkosiec",
  //   svg: (
  //     <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  //       <title>Instagram</title>
  //       <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z" />
  //     </svg>
  //   ),
  // },
];

export default function Home(): JSX.Element {
  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout title="Home" description={siteConfig.tagline}>
      <Hero />
      <main>
        <div className="container padding-vert">
          <AboutMe avatar={avatar} descriptionComponent={<AboutMeDesc />} />
          <SocialLinks data={socialLinks} />
        </div>
      </main>
    </Layout>
  );
}
